<template>
	<view class="WriteOff">
		<view class="box">
			<uni-forms-item label="券码">
				<uni-easyinput v-model="value" placeholder="请输入" />
			</uni-forms-item>
			<view class="btn" @click="duihuanFun">
				核销
			</view>
			<view class="">
				<text>注：<br>1.请输入用户提交的6位数字核销码;<br>2.核销有问题可致电4001768987咨询</text>
			</view>
		</view>
		<view class="shadow" v-if="isShadow">

		</view>
		<view class="tips" v-if="isSuccess">
			<text class="status">
				已成功核销
			</text>
			<view class="hxbtn" @click="sureFun">
				确定
			</view>
		</view>
		<view class="tips" v-if="isFail">
			<text class="status">
				核销失败
			</text>
			<text class="info">
				输入券码有误，请核实！
			</text>
			<view class="hxbtn" @click="FailFun">
				确定
			</view>
		</view>
		<view class="tips" v-if="isRepeate">
			<text class="status">
				核销失败
			</text>
			<text class="info">
				该券码已核销，请输入新的核券码！
			</text>
			<view class="hxbtn" @click="repeateFun">
				确定
			</view>
		</view>

	</view>
</template>

<script setup>
	const value = ref()
	const isShadow = ref(false)
	const isSuccess = ref(false)
	const isFail = ref(false)
	const isRepeate = ref(true)
	const duihuanFun = () => {
		isShadow.value = true
		isSuccess.value = true
	}
	const sureFun = () => {
		isShadow.value = false
		isSuccess.value = false
	}
	const FailFun = () => {
		isShadow.value = false
		isFail.value = false
	}
	const repeateFun = () => {
		isShadow.value = false
		isRepeate.value = false
	}
</script>

<style lang="scss">
	.WriteOff {
		width: 100%;
		height: 100%;
		background: url("../../../static/image/券码核销bg@2x.png") no-repeat;
		background-size: 100% 100%;
		padding-top: 40%;
		box-sizing: border-box;
		overflow: hidden;

		.box {
			width: 90%;
			height: 220px;
			background: #fff;
			border-radius: 20px;
			padding: 20px;
			box-sizing: border-box;
			margin: 0 5%;

			.btn {

				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				height: 100rpx;
				margin: 20rpx 0 20rpx 0;
				border-radius: 50rpx;
				color: #FFFFFF;
				background-image: linear-gradient(to right, #1b196f, #0b0a34);
			}

		}

		.tips {
			width: 70vw;
			height: 70vw;
			background: url("../../../static/image/success.png") no-repeat;
			background-size: 100% 100%;
			padding: 20px;
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.status {
				margin-top: 20vw;
				font-size: 40rpx;
				color: #333333;
				font-weight: bold;
				line-height: 2;

			}
			.info{
				line-height: 3;
			}

			.hxbtn {
				width: 60%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				height: 90rpx;
				margin: 20rpx 0 20rpx 0;
				border-radius: 50rpx;
				color: #FFFFFF;
				background-image: linear-gradient(to right, #1b196f, #0b0a34);
			}


		}

		.shadow {
			background: rgba(0, 0, 0, 0.3);
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		::v-deep {

			.uni-easyinput__content,
			.uni-easyinput__content-textarea,
			.uni-easyinput__content-input {
				border: none;
				background: #f6f7fb;

			}

			text {
				// color: #9c9d9f !important;
				line-height: 1.5;
			}
		}

	}
</style>